VS Code Extensions

Essential (IntelliSense, Linting, Formatting)

• Vue Language Features (Volar)
• ESLint
• Prettier
• EditorConfig

Recommended

• TODO Highlight
• GitLens — Git supercharged
• Import Cost
• VS Code Icons
• Quasar Docs
• Common Intellisense

Quasar CLI (with Vite)

If you created your project with Quasar CLI, you already have the recommended VS Code configuration. 💪

When you open your project on VS Code, it will prompt you to install our recommended extensions if you haven’t installed them already. Just restart VS Code after installing them and you are ready to go! 🚀

Quasar Vite Plugin

Depending on which features/presets you are using, you can add the related options to .vscode/settings.json.

Common Configuration

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

ESLint

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
}

Without Prettier

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

With Prettier

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

TypeScript

{
  "js/ts.tsdk.path": "node_modules/typescript/lib"
}